class CanvasRenderer {
  constructor() {
    // 创建离屏Canvas - 增加尺寸以显示更多内容
    this.canvas = document.createElement('canvas');
    this.canvas.width = 1280; // 增加宽度以容纳更长的文本行
    this.canvas.height = 320; // 增加高度以适应多行文本和更大的字体
    this.ctx = this.canvas.getContext('2d');
    
    // 启用抗锯齿以提高文本清晰度
    this.ctx.imageSmoothingEnabled = true;
    this.ctx.imageSmoothingQuality = 'high';
    
    // 样式配置 - XR优化的高可见度样式
    this.styleConfig = {
      fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", serif',
      fontSize: 36,      // 适当缩小字体尺寸以优化视觉呈现
      fontColor: '#ffffff',  // 白色字体，提高可读性
      backgroundColor: 'rgba(0, 0, 0, 0.7)', // 黑色半透明背景，更好地衬托白色文本
      padding: 20,       // 适当调整内边距以配合较小的字体
      lineHeight: 1.4,   // 调整行高以适应更多行
      maxLines: 3,       // 增加最大行数
      borderRadius: 16,  // 圆角
      // 简化渲染以提高性能和确保正确显示
      simplifyRendering: true // 简化渲染设置，避免描边和阴影冲突
    };
    
    // 纹理平面管理器引用
    this.texturePlaneManager = null;
    
    console.log('CanvasRenderer initialized with dimensions:', this.canvas.width, 'x', this.canvas.height);
  }
  
  /**
   * 设置纹理平面管理器引用
   * @param {TexturePlaneManager} manager - 纹理平面管理器实例
   */
  setTexturePlaneManager(manager) {
    this.texturePlaneManager = manager;
  }
  
  /**
   * 设置样式配置
   * @param {Object} config - 样式配置对象
   */
  setStyleConfig(config) {
    this.styleConfig = { ...this.styleConfig, ...config };
    console.log('CanvasRenderer style config updated:', this.styleConfig);
  }
  
  /**
   * 获取Canvas元素
   * @returns {HTMLCanvasElement} Canvas元素
   */
  getCanvas() {
    return this.canvas;
  }
  
  /**
   * 绘制文本到Canvas
   * @param {string} text - 要绘制的文本
   */
  drawText(text) {
    // 清空画布
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    if (!text || text.trim() === '') {
      return;
    }
    
    // 保存当前上下文状态
    this.ctx.save();
    
    // 核心实现：在XR模式下，使用垂直翻转处理，以实现字幕内容的整体上下方向翻转
    // 垂直翻转可以确保文本在3D渲染环境中正确显示
    this.ctx.translate(0, this.canvas.height);
    this.ctx.scale(1, -1);
    
    // 设置文本样式 - 简化版本以避免渲染冲突
    this.ctx.font = `${this.styleConfig.fontSize}px ${this.styleConfig.fontFamily}`;
    this.ctx.fillStyle = this.styleConfig.fontColor; // 确保使用黄色
    this.ctx.textAlign = 'center';
    this.ctx.textBaseline = 'middle';
    
    // 清除所有可能影响渲染的设置
    this.ctx.strokeStyle = 'transparent';
    this.ctx.lineWidth = 0;
    this.ctx.shadowColor = 'transparent';
    this.ctx.shadowOffsetX = 0;
    this.ctx.shadowOffsetY = 0;
    this.ctx.shadowBlur = 0;
    
    // 计算文本尺寸并换行 - 改进版本确保背景大小匹配文本内容
    const lines = this._wrapText(text);
    const textHeight = this.styleConfig.fontSize * this.styleConfig.lineHeight;
    
    // 计算最长行的宽度，确保背景框匹配文本长度
    let maxLineWidth = 0;
    this.ctx.font = `${this.styleConfig.fontSize}px ${this.styleConfig.fontFamily}`;
    lines.slice(0, this.styleConfig.maxLines).forEach(line => {
      const lineWidth = this.ctx.measureText(line).width;
      maxLineWidth = Math.max(maxLineWidth, lineWidth);
    });
    
    // 设置背景宽度为文本宽度加内边距，不超过画布宽度
    const bgWidth = Math.min(maxLineWidth + (this.styleConfig.padding * 2), this.canvas.width - (this.styleConfig.padding * 2));
    const bgHeight = Math.min(lines.length, this.styleConfig.maxLines) * textHeight + (this.styleConfig.padding * 2);
    
    // 计算居中位置
    const bgX = (this.canvas.width - bgWidth) / 2;
    const bgY = (this.canvas.height - bgHeight) / 2;
    
    // 绘制背景圆角矩形 - 注意：由于我们已经翻转了画布，不需要再调整坐标
    this._drawRoundedRect(bgX, bgY, bgWidth, bgHeight, this.styleConfig.borderRadius, this.styleConfig.backgroundColor);
    
    // 绘制文本 - 简化版本，只使用填充以确保正确颜色
    const startY = bgY + this.styleConfig.padding + (textHeight / 2);
    lines.slice(0, this.styleConfig.maxLines).forEach((line, index) => {
      const y = startY + (index * textHeight);
      
      // 只使用填充文本，避免描边和填充顺序问题
      this.ctx.fillText(line, this.canvas.width / 2, y);
    });
    
    // 通知纹理平面管理器更新纹理
    if (this.texturePlaneManager) {
      this.texturePlaneManager.updateTexture();
    }
    
    // 恢复上下文状态，确保不影响后续绘制
    this.ctx.restore();
  }
  
  /**
   * 计算文本换行 - 增强版本支持中英文混合文本和长文本处理
   * @param {string} text - 原始文本
   * @returns {string[]} 换行后的文本行数组
   */
  _wrapText(text) {
    // 对于中英文混合文本，使用更智能的换行策略
    const lines = [];
    let currentLine = '';
    const maxWidth = this.canvas.width - (this.styleConfig.padding * 2);
    
    // 设置字体以确保测量准确性
    this.ctx.font = `${this.styleConfig.fontSize}px ${this.styleConfig.fontFamily}`;
    
    // 遍历文本的每个字符
    for (let i = 0; i < text.length; i++) {
      const char = text[i];
      const testLine = currentLine + char;
      const metrics = this.ctx.measureText(testLine);
      
      // 检查当前行是否超过最大宽度
      if (metrics.width > maxWidth && currentLine.length > 0) {
        // 尝试在合适的位置分割（空格、标点等）
        const lastSpaceIndex = currentLine.lastIndexOf(' ');
        const lastPunctuationIndex = currentLine.lastIndexOf(/[，,；;。.!?]/);
        let splitIndex = -1;
        
        // 优先在标点处分割
        if (lastPunctuationIndex > 0) {
          splitIndex = lastPunctuationIndex;
        } 
        // 其次在空格处分割
        else if (lastSpaceIndex > 0) {
          splitIndex = lastSpaceIndex;
        }
        
        // 如果找到了合适的分割点
        if (splitIndex > 0) {
          lines.push(currentLine.substring(0, splitIndex + 1));
          currentLine = currentLine.substring(splitIndex + 1) + char;
        } else {
          // 否则强制分割
          lines.push(currentLine);
          currentLine = char;
        }
        
        // 如果已经达到最大行数限制
        if (lines.length >= this.styleConfig.maxLines - 1) {
          // 处理最后一行
          currentLine = text.substring(i);
          break;
        }
      } else {
        currentLine = testLine;
      }
    }
    
    // 添加最后一行，确保不超过最大宽度
    if (currentLine.length > 0 && lines.length < this.styleConfig.maxLines) {
      // 检查最后一行是否需要截断
      const metrics = this.ctx.measureText(currentLine);
      if (metrics.width > maxWidth) {
        // 截断并添加省略号
        let truncatedLine = currentLine;
        while (this.ctx.measureText(truncatedLine + '...').width > maxWidth && truncatedLine.length > 0) {
          truncatedLine = truncatedLine.substring(0, truncatedLine.length - 1);
        }
        lines.push(truncatedLine + '...');
      } else {
        lines.push(currentLine);
      }
    }
    
    return lines;
  }
  
  /**
   * 绘制圆角矩形 - 优化版本确保正确填充
   * @param {number} x - 左上角x坐标
   * @param {number} y - 左上角y坐标
   * @param {number} width - 宽度
   * @param {number} height - 高度
   * @param {number} radius - 圆角半径
   * @param {string} color - 填充颜色
   */
  _drawRoundedRect(x, y, width, height, radius, color) {
    this.ctx.save();
    // 确保清除任何可能影响填充的设置
    this.ctx.strokeStyle = 'transparent';
    this.ctx.lineWidth = 0;
    
    this.ctx.beginPath();
    this.ctx.moveTo(x + radius, y);
    this.ctx.lineTo(x + width - radius, y);
    this.ctx.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0);
    this.ctx.lineTo(x + width, y + height - radius);
    this.ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
    this.ctx.lineTo(x + radius, y + height);
    this.ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
    this.ctx.lineTo(x, y + radius);
    this.ctx.arc(x + radius, y + radius, radius, Math.PI, -Math.PI / 2);
    this.ctx.closePath();
    
    // 设置填充样式并填充
    this.ctx.fillStyle = color;
    this.ctx.fill();
    this.ctx.restore();
  }
  
  /**
   * 调整Canvas尺寸
   * @param {number} width - 新宽度
   * @param {number} height - 新高度
   */
  resize(width, height) {
    this.canvas.width = width;
    this.canvas.height = height;
    console.log('Canvas resized to:', width, 'x', height);
    
    // 如果有当前文本，重新绘制
    if (this.texturePlaneManager && this.texturePlaneManager.currentText) {
      this.drawText(this.texturePlaneManager.currentText);
    }
  }
}

// 导出单例实例
const canvasRenderer = new CanvasRenderer();
export default canvasRenderer;